<template>
  <el-form ref="previewForm" class="process-form" label-position="top" :rules="rules" :model="_value">
    <template v-for="(item, index) in forms" :key="item.name + index">
      <el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'" :prop="item.id" :label="item.title">
        <template #label>
          <span>{{ item.title }}</span>
          <div v-show="item.props.showDescription">
            <el-tooltip :content="item.props.description" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </template>
        <form-design-render :ref="`sub-item_${item.id}`" v-model="_value[item.id]" mode="PC" :config="item" />
      </el-form-item>
      <form-design-render ref="span-layout" v-else v-model="_value" mode="PC" :config="item" />
    </template>
  </el-form>
</template>

<script setup>
import FormDesignRender from "./FormDesignRender";
import { computed, ref, getCurrentInstance, nextTick } from "vue";

const props = defineProps({
  forms: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Object,
    default: () => ({})
  }
});
const emit = defineEmits(["update:modelValue"]);

const { proxy } = getCurrentInstance();
const rules = ref({});

const _value = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
const validate = call => {
  let success = true;
  proxy.$refs.previewForm.validate(valid => {
    success = valid;
    if (valid) {
      for (let i = 0; i < props.forms.length; i++) {
        if (props.forms[i].name === "TableList") {
          let formRef = proxy.$refs[`sub-item_${props.forms[i].id}`];
          if (formRef && Array.isArray(formRef) && formRef.length > 0) {
            formRef[0].validate(subValid => {
              success = subValid;
            });
            if (!success) {
              break;
            }
          }
        }
      }
    }
    call(success);
  });
};
const loadFormConfig = forms => {
  forms.forEach(item => {
    if (item.name === "SpanLayout") {
      loadFormConfig(item.props.items);
    } else {
      _value.value[item.id] = props.modelValue[item.id];
      if (item.props.required) {
        rules.value[item.id] = [
          {
            type: getValidType(item),
            required: true,
            message: item.props.validateFailMessage || `请填写${item.title}`,
            trigger: item.props.validateTrigger || "blur"
          }
        ];
      }
    }
  });
};

const getValidType = item => {
  switch (item.valueType) {
    case "Array":
      return "array";
    case "User":
      return "array";
    case "Dept":
      return "array";
    case "Number":
      return "number";
    default:
      return undefined;
  }
};

const submitForm = call => {
  validate(call);
};
const resetForm = async callBack => {
  await nextTick();
  proxy.$refs.previewForm.resetFields();
  callBack && callBack();
};

defineExpose({
  submitForm,
  resetForm
});

loadFormConfig(props.forms);
</script>

<style lang="less" scoped>
.process-form {
  :deep(.el-form-item) {
    margin-bottom: 15px;
  }
  :deep(.el-form-item__label) {
    padding: 0 0;
  }
}
</style>
